<template>
  <div class="kuaidai">
    <div class="bai">
        <div class="content">
            <p>贷款额度最高(元)</p>
            <h3>200,000.00</h3>
            <span>年化利率低至4.15% (贷款期限最长36个月)</span><br>
            <span>(按单利计算，不存在与贷款直接相关的任何费用)</span>
        </div>
    </div>
    <div class="down">
        <div class="yuan">

        </div>
        
    </div>
    <ul>
        <li>.随时还款</li>
        <li>.分期还款</li>
        <li>.用时起息</li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .kuaidai {
        width: 90%;
        height: 1.8rem;
        margin: auto;
        margin-top: .1rem;
        border-radius: .05rem;
        background: #055393;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        .bai {
            width: 95%;
            height: 91%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

        }
    }
    .content {
        width: 95%;
        height: 91%;
        border: 2px solid #e0ebf4;
        text-align: center;
        p {
            font-size: .12rem;
        }
        h3 {
            font-size: .22rem;
            margin-bottom: .05rem;
        }
    }
    .content>p:nth-child(1){
        margin: .1rem 0 .05rem 0;
    }
    .content span {
        font-size: .12rem;
        color: #363a3d;
    }
    .content span:last-child {
        color: #878b94;
    }
    .down {
        width: 100%;
        height: .6rem;
        background: #106cb7;
        position: absolute;
        left: 0;
        bottom: 0;
        overflow: hidden;
        .yuan {
            width: 2.5rem;
            height: 2.5rem;
            background: #fff;
            // border: .01rem solid #f00;
            border-radius: 50%;
            // transform: translateX(0.5rem);
            transform: translate(0.5rem,-2.3rem);
        }
    }
    ul {
        width: 2.45rem;
        display: flex;
        position: absolute;
        bottom: .1rem;
        left: calc(50% - 1.25rem);
        justify-content: space-between;
        color: #fff;
        li {
            font-size: .12rem;
        }
    }
</style>